<template>
  <div>
    <el-dialog
      width="750px"
      :title="$t('详情')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-form class="my-form" @submit.native.prevent ref="formRef" :model="form">
        <section>
          <el-form-item :label="$t('包裹号')">
            <div>{{ form.packageNo }}</div>
          </el-form-item>
          <el-form-item :label="$t('订单号')">
            <div>{{ form.orderNos }}</div>
          </el-form-item>
          <el-form-item :label="$t('快递平台')">
            <div>{{ form.deliveryTypeFinalStr }}</div>
          </el-form-item>
          <el-form-item :label="$t('快递标识')">
            <div>{{ form.deliveryWayFinal }}</div>
          </el-form-item>
          <el-form-item :label="$t('包裹份数')">
            <div>{{ form.packageNum }}</div>
          </el-form-item>
          <el-form-item :label="$t('快递号')">
            <div>{{ form.deliveryNos }}</div>
          </el-form-item>
          <el-form-item :label="$t('快递费用')">
            <div>{{ form.deliveryFee }}</div>
          </el-form-item>
          <el-form-item :label="$t('捆包费用')">
            <div>{{ form.bundleFee }}</div>
          </el-form-item>
        </section>
        <section>
          <el-form-item :label="$t('收货人地址')">
            <div>{{ handleReceiveAddress() }}</div>
          </el-form-item>
          <el-form-item :label="$t('收货人邮编')">
            <div>{{ form.receivePostcode }}</div>
          </el-form-item>
          <el-form-item :label="$t('收货人')">
            <div>{{ form.receiveName }}</div>
          </el-form-item>
          <el-form-item :label="$t('收货人电话')">
            <div>{{ form.packageNo }}</div>
          </el-form-item>
          <el-form-item :label="$t('关联sku')">
            <div class="sku-list">
              <div v-for="item in form.skus" class="sku-list-item">
                <div class="skuNo">{{ item.skuNo }}</div>
                <el-image
                  fit="contain"
                  style="width: 30px; height: 30px"
                  :key="Math.random()"
                  v-hover="item.imgUrl"
                  :src="item.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
                <div>{{ item.orderSkuNum }}</div>
              </div>
            </div>
          </el-form-item>
        </section>
      </el-form>

      <div slot="footer">
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-button size="mini" type="danger" @click="handleDeletePackage" v-show="showDeleteBtn">
              {{ $t('删除子派送包裹并计算首位路线') }}
            </el-button>
          </div>
          <el-button @click="cancel">{{ $t('关闭') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteGoogleRouteShipments } from '@/api/orderManage/batchDispatch'

export default {
  props: {
    /**
     * showDeleteBtn
     */
    showDeleteBtn: {
      type: Boolean,
      default: () => true,
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.form = { ...this.formData }
        console.log(`  this.form  ==>`, JSON.parse(JSON.stringify(this.form)))
      }
    },
  },
  methods: {
    handleDeletePackage() {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        deleteGoogleRouteShipments(this.formData.item.id).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.cancel()
            this.$emit('getList')
          }
        })
      })
    },
    handleReceiveAddress() {
      const row = this.form
      return (
        (row.address1 || '') +
        (row.address2 || '') +
        (row.address3 || '') +
        (row.address4 || '') +
        (row.address5 || '') +
        (row.address6 || '')
      )
    },
    getList() {},

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.my-form {
  display: flex;
  section {
    flex: 1;
    .sku-list {
      display: flex;
      flex-direction: column;
      white-space: nowrap;
      &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #eee;
        border-radius: 3px;
        padding: 0 5px;
        margin-bottom: 5px;
        .skuNo {
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
